<template>
    <div class="home-style">
        <rSwiper ref="swiperDOM" class="swiper" @loadEnd="funLoadEnd" @transitionend="funTransitionend">
            <rSlide>
                <div class="box"></div>
            </rSlide>
            <rSlide>
                <div class="box box2"></div>
            </rSlide>
            <rSlide>
                <div class="box box3"></div>
            </rSlide>
        </rSwiper>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { rSlide, rSwiper } from 'r-swiper'

const nowIndex = ref(0)

const swiperDOM = ref(null)

const funLoadEnd = () => {
    console.log('loading - success');
}

const funTransitionend = (i) => {
    nowIndex.value = i
    console.log('当前下标', nowIndex.value)
}


</script>

<style scope>

.home-style {
    width: 100%;
    height: 100%;
}

.box {
    width: 100vw;
    height: 100%;
    background-color: red;
    background-size: cover;
}

.box2 {
    background-color: yellow;
}

.box3 {
    background-color: blue;
}
</style>